
<template>

  <div class='orderList-container'>
     <navSearch  :formList="formList" @btnSearch="btnSearch" ref="formList"></navSearch>
    <!-- 组件 -->
      <el-row class="btn" type="flex" justify="left">
        <el-button @click="all">全部</el-button>
        <el-button @click="unpaid">待支付</el-button>
        <el-button @click="waitZiTi">待自提</el-button>
        <el-button @click="waitShipments">待发货</el-button>
        <el-button @click="received">已收货</el-button>
        <el-button @click="refund">售后退款</el-button>
        <el-button @click="cancel">已取消</el-button>
      </el-row>
      <!-- 放置表格 -->
      <el-card>
        <el-table
      :data="orderList"
     >
      <el-table-column
        prop="stroesId"
        width="100"
        align="center"
        label="商户ID"
        sortable=""
        />
      <el-table-column
        prop="storesName"
        width="100"
        align="center"
        label="商户名称"
     />
      <el-table-column
        prop="orderNumber"
        width="100"
        align="center"
        label="订单号"
        sortable="" />
      <el-table-column
        prop="specification"
        width="100"
        align="center"
        label="商品列表"
        />
      <el-table-column
        prop="orderTime"
        width="100"
        align="center"
        label="下单时间"
        sortable=""
     />
      <el-table-column
        prop="orderAmount"
        width="100"
        align="center"
        label="订单总金额"
        sortable="" />
      <el-table-column
        prop="modeDistribution"
        width="100"
        align="center"
        label="配送方式"

       />
      <el-table-column
        prop="configureRecipient"
        width="100"
        align="center"
        label="收货地址/提货人"
        />

      <el-table-column
        prop="orderStatus"
        width="100"
        align="center"
        label="订单状态"
   />
      <el-table-column
        align="center"
        label="操作"
         >
        <!-- <template #default="{row}"> -->
          <template #default="{row}">
              <!-- <el-button type="text" size="small" @click="$router.push(`orderDetail/${row.id}`)">查看订单</el-button> -->
              <el-button type="text" size="small"  @click="$router.push({name:'orderDetail'})" >查看订单</el-button>
              <el-button type="text" size="small"  @click="delOrder(row.id)">取消订单</el-button>
        </template>
      </el-table-column>
      </el-table>
     <!-- 分页组件 -->
        <!-- <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
              class="paging"
              layout="prev, pager, next"
              >
            </el-pagination>
        </el-row> -->
      </el-card>
  </div>
</template>

<script>
import { getOrderList, delOrder } from '@/api/order'
// import { getGoodsList } from '@/api/goods'
export default {
  data () {
    return {
      formList: { store: true, orderNum: true },
      orderList: []
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    async getOrderList () {
      this.orderList = await getOrderList()
    },

    async delOrder (id) {
      try {
        await this.$confirm('你确定取消订单吗')
        await delOrder(id)
        this.getOrderList()
        this.$message.success('取消订单成功')
      } catch (error) {
        console.log(error)
      }
    },
    btnSearch (formData) {
      const { store, orderNum, phone } = formData
      if (store !== '') {
        this.orderList = this.orderList.filter(v => {
          return v.storesName === store
        })
      } else if (orderNum !== '') {
        console.log(orderNum)
        this.orderList = this.orderList.filter(v => {
          return v.orderNumber.toString() === orderNum
        })
      } else if (phone !== '') {
        this.orderList = this.orderList.filter(v => {
          return v.storesName === store
        })
      } else {
        this.getOrderList()
      }
      this.$refs.formList.btnReset()
    },
    all () {
      return this.getOrderList()
    },
    unpaid () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '待支付'
      })
    },
    waitZiTi () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '待自提'
      })
    },
    waitShipments () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '待发货'
      })
    },
    received () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '已收货'
      })
    },
    refund () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '申请退款'
      })
    },
    cancel () {
      this.orderList = this.orderList.filter(v => {
        return v.orderStatus === '已取消'
      })
    }
  }
}
</script>

<style  lang='less' scoped>
.paging{
  height: 10px;
}
.btn{
  margin: 10px 0;
}
thead{
  line-height: 50px;
}
</style>
